<template>
  <div class="box">
    <div class="title">
      <span class="el-icon-arrow-left" @click="$router.go(-1)"></span>
      我的银行卡
    </div>
    <!-- 银行卡 -->
    <div class="card">
      <div v-for="item in cardList"
           :key="item.ROW_NUMBER"
           :class="checkBank(item.bank_id)" class="jianhang card_YH">
        <div>{{ item.bank_name }}</div>
        <div>储蓄卡</div>
        <div>{{ item.card_number }}</div>
      </div>
    </div>
    <!--  -->
    <div class="btn_YH" @click="$router.push({path:'/listAddCard'})">
      <span>绑定其它银行卡</span><span class="el-icon-plus"></span>
    </div>
  </div>
</template>

<script>
import {bankCardList} from '@/api/merbership/member'

export default {
  data() {
    return {
      cardList: []
    }
  },
  mounted() {
    this.bankCardList()
  },
  methods: {
    checkBank(id) {
      switch (id) {
        case '1':
          return {
            'jianhang': true
          }
        case '2':
          return {
            'zhonghang': true
          }
        default:
          break
      }
    },
    // ---------------- axios -----------------
    /**
     * 银行卡列表
     */
    bankCardList() {
      const pd = {}
      bankCardList(pd)
        .then(res => {
          this.cardList = res.data.data.list
        })
    }
  }
}
</script>

<style scoped>
/* 标题 */
.title {
  background-color: #7ac91b;
  color: #fff;
  font-size: 18px;
  text-align: center;
  padding: 15px;
  font-weight: bold;
}

.title .el-icon-arrow-left {
  float: left;
  margin-top: 5px;
}

/*  */
/*  .card {
    margin: 15px;
  } */

/* jianhang */
.card_YH {
  background-repeat: no-repeat;
  background-size: 100% 100%;
  color: #FFF;
  padding: 15px;
}

.card_YH > div {
  margin: 15px;
}

.card_YH > div:nth-child(1) {
  font-size: 18px;
}

.card_YH > div:nth-child(2) {
  font-size: 14px;
}

.card_YH > div:nth-child(3) {
  font-size: 15px;
}

.jianhang {
  background-image: url(../../../../assets/static/cardList/q1.png);
}

.zhonghang {
  background-image: url(../../../../assets/static/cardList/q2.png);
}

/*  */
.btn_YH {
  margin: 50px;
  background-image: linear-gradient(to right, #FED000, #FFB200);
  color: #FFFFFF;
  font-size: 14px;
  padding: 15px;
  text-align: center;
  border-radius: 25px;
}

.el-icon-plus {
  font-weight: 1000;
  margin-left: 5px;
  font-size: 10px;
}
</style>
